<template>
  <div>
    <!--script中要export-->
    <HeaderSelector></HeaderSelector>
    <!--    <HeaderView></HeaderView>-->
    <div class="mcontaner">
      <h1 class="title">邮说</h1>
      <!--      <div class="cascader">-->
      <!--        <el-carousel height="150px">-->
      <!--          <el-carousel-item v-for="item in 4" :key="item">-->
      <!--            <h3 class="small">{{ item }}</h3>-->
      <!--          </el-carousel-item>-->
      <!--        </el-carousel>-->
      <!--      </div>-->
      <!--搜索框-->
      <el-row :gutter="20">

        <el-col>
          <div class="msearch">
            <el-row :gutter="10">
              <div class="search">
                <!--              <el-col :span="12">-->
                <el-input
                    placeholder="搜索"
                    v-model="input"
                    clearable
                    @change="search(1)"
                >
                </el-input>
                <!--              </el-col>-->
              </div>
            </el-row>
          </div>
        </el-col>

      </el-row>

      <br>
      <br>

      <div class="mainrow">
        <el-row :gutter="20">

          <!--时间线文章缩略-->
          <el-col :span="18" class="mcontent">
            <div class="block">
              <!--使用时间线组件-->
              <el-timeline>
                <!--placement时间戳位置-->
                <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
                  <el-card shadow="hover" class="cards" @click.native="toDetail(blog.id)">
                    <el-row>
                      <el-col :span="16">
                        <h3>
                          <!--路由传参
                            通过params关键字
                            <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。
                            通过 to 属性指定目标地址，默认渲染成带有正确链接的
                          -->
                          <!--                          <router-link  :to="{name: 'BlogDetail', params: {blogId: blog.id}}">-->
                          <!--                            {{ blog.title }}-->
                          <!--                          </router-link>-->
                          <el-link type="primary" :underline="false" class="blogDetail">{{ blog.title }}</el-link>
                        </h3>
                      </el-col>

                      <el-col :span="8" class="cardUser">
                        <el-avatar :src="blog.avatar"
                                   size="small">
                        </el-avatar>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="16">
                        <p>{{ blog.description }}</p>
                      </el-col>
                      <el-col :span="8" class="view">
                        <i class="el-icon-circle-check"> {{ blog.likeCount }}</i>
                        &nbsp;
                        <i class="el-icon-view"> {{ blog.view }}</i>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-timeline-item>

              </el-timeline>

              <!--分页组件-->
              <!--关键属性：
                current-page
                page-size
                total
                点击分页的事件：@current-change
                -->
              <el-pagination class="mpage"
                             background
                             layout="prev, pager, next"
                             :current-page="currentPage"
                             :page-size="pageSize"
                             :total="total"
                             @current-change=page>
              </el-pagination>

            </div>
          </el-col>

          <!--分类-->
          <el-col :span="6" class="classify">
            <h3>分类</h3>
            <el-card shadow="hover" class="box-card">
              <!--之前的分类标签不好 这里重写-->
              <!--动态性地生成标签-->
              <el-checkbox-group v-model="metasFromFront" @change="classify">
                <el-checkbox
                    v-for="(item, index) in metasFromBack"
                    :key="index"
                    :label="item.label"
                >{{ item.label }}
                </el-checkbox>
              </el-checkbox-group>

            </el-card>
            <br>
            <h3>推荐</h3>
            <div class="mrecommend">
              <el-card shadow="hover" class="box-card">
                <h4>{{ recommendBlog.title }}</h4>
                {{ recommendBlog.description }}
                <br>
                <el-link :underline="false">
                  <router-link :to="{name: 'BlogDetail', params: {blogId: recommendBlog.id}}">点击前往</router-link>
                </el-link>
              </el-card>
            </div>

          </el-col>
        </el-row>
      </div>

    </div>
  </div>
</template>

<script>
//导入Header
import HeaderSelector from "../components/HeaderSelector";
import HeaderView from "../components/HeaderView";
import mindx from "../mobile/views/mindx";

export default {
  name: "Blogs.vue",
  //这一语句 -> 才能在template中 <header>
  components: {HeaderView, HeaderSelector},
  data() {
    return {
      blogs: {},
      recommendBlog: {},
      currentPage: 1,
      currentPage_s: 1,
      total: 0,
      pageSize: 10,

      input: '',

      checkboxGroup1: [],

      username: '',

      imgSrc: '',


      metasFromFront: [],  //前台选中发送给后端的

      metasFromBack: [],//从后台来的metas

    }
  },
  methods: {

    //分页功能 接收当前页数参数
    page(currentPage) {
      const _this = this
      _this.$axios.get("/blogs?currentPage=" + currentPage).then(res => {
        console.log(res)
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        _this.blogs = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
        // window.scrollTo(0, 0);
      })
    },

    //搜索功能
    search(currentPage) {
      this.$axios.get("/searchBlog?searchContent=" + this.input + "&currentPage=" + currentPage).then(res => {
        console.log(res)
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        this.blogs = res.data.data.records
        this.currentPage = res.data.data.current
        this.total = res.data.data.total
        this.pageSize = res.data.data.size
        // window.scrollTo(0, 0);


        if (this.blogs.length === 0) {
          this.$notify({
            title: '没有该文章哦',
            message: this.$createElement('i', {style: 'color: teal'}, '要不发一篇这个标题的文章')
          });
        }

      })
    },


    //当然以前的分类方法扔掉
    classify() {
      //这里的传参很重要
      this.$axios.post("/queryBlogByMeta", {"metas": this.metasFromFront}).then(res => {
        console.log("分类成功")
        this.blogs = res.data.data.records
        this.currentPage = res.data.data.current
        this.total = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },

    toDetail(bid) {
      this.$router.push({name: 'BlogDetail', params: {blogId: bid}})
    },
  },


  created() {
    // this.$router.push(mindx)

    let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)

    if (flag) {
      this.$notify({
        title: '检测到你用的是手机',
        dangerouslyUseHTMLString: true,
        message: '<strong><a href="/#/mindex">手机界面</a></strong>',
        duration: 0
      });
    }


    //钩子函数 初始化就赋值为1
    this.page(1)

    //获取推荐文章
    this.$axios.get("/recommend").then(res => {
      this.recommendBlog = res.data.data;
    })

    //生成分类标签
    this.$axios.get("/getMetas").then(res => {

      var meta = {label: ''}
      var metas = new Array();

      for (var i = 0; i < res.data.data.count; i++) {
        //牛啊牛啊
        meta = {}   //必须要清空一次  //只用下面这一句不够
        meta.label = res.data.data.labels[i]
        metas[i] = meta
      }
      this.metasFromBack = metas
    })

  }
}
</script>

<style scoped>

.mpage {
  margin: 0 auto;
  text-align: center;
}


.mtitle {
  position: relative;
  bottom: 5px;
}

.title {
  color: #409EFF;
  /*相对定位 可实现移动*/
  position: relative;
  bottom: 20px;
  left: 20px;

}

.title_2 {
  color: #7fbcfc;
  /*相对定位 可实现移动*/
  position: relative;
  bottom: 2px;
}

.cards {
  background-color: rgba(222, 237, 252, 0.26);
}

.box-card {

  background-color: rgba(222, 237, 252, 0.27);
}

.search {
  margin: auto;
  text-align: center;
  width: 30%;
}

.msearch {
  text-align: center;
  position: relative;
  right: 200px;
  bottom: 20px;
  width: 1600px;
  margin: auto;
}

.mcontent {
  /*相对定位 可实现移动*/
  position: relative;
  right: 20px;
  bottom: 40px;
  width: 700px;
}

.recommend {
  /*相对定位 可实现移动*/
  position: relative;
  bottom: 40px;
}

.mrecommend {
  /*相对定位 可实现移动*/
  /*position: relative;*/
  /*left: 20px;*/
}

.classify {
  /*相对定位 可实现移动*/
  position: relative;
  bottom: 40px;
  width: 350px;
  /*left: 100px;*/
  /*z-index: -1;*/
}

.mclassify {
  /*相对定位 可实现移动*/
  /*position: relative;*/
  /*left: 40px;*/
}

.g2 {
  position: relative;
  top: 10px;
}

.h4t {
  /*color: #00B7FF;*/
}

.cardUser {
  text-align: right;
}


.view {
  margin: auto;
  text-align: right;
  position: relative;
  top: 30px;
}

.el-calendar {
  width: 300px;
  height: 50px;
}

.mainrow {
  /*position: relative;*/
  margin: auto;
  /*text-align: center;*/
  /*letf: 100px;*/
  width: 70%;
}

.mcontaner {
  position: relative;

  top: 75px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  margin: auto;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.cascader {
  position: relative;
  bottom: 20px;
  width: 45%;
  text-align: center;
  margin: auto;
  z-index: -1;
}

.blogDetail {
  font-weight: bolder;
  font-size: medium;
}

</style>